import { Button, Form, Input, message, type FormProps } from "antd"
import { useState } from "react"
import { loginApi } from "../../api/login/loging"
import { useNavigate } from "react-router"

type FieldType = {
  account: string
  password: string
}

const LoginPage: React.FC = () => {
  const [loading, setLoading] = useState<boolean>(false)
  let navigate = useNavigate()
  const onFinish: FormProps<FieldType>['onFinish'] = async (values) => {
    setLoading(true)
    const res = await loginApi(values)
    if (res.code == 200) {
      message.success(res.message)
      navigate('/welcome')
    }
    setLoading(false)
  };


  return <div className="container m-auto my-7 p-6">
    <div className="card w-full shadow-sm">
      <div className="card-body">
        <h2 className="card-title">
          欢迎使用智能电子书馆<div className="badge badge-primary">AI</div>
        </h2>
        <p>提供高级智能体服务，支持智能检索、知识库问答、书籍上传下载等功能！</p>
      </div>
    </div>
    <div className="card bg-base-100 mt-24 min-w-96 max-w-1/4 mx-auto shadow-sm">
      <div className="card-body">
        <h2 className="card-title mb-3.5">
          登录到您的账户
        </h2>
        <Form
          name="loginForm"
          onFinish={onFinish}
          layout="vertical"
        >
          <Form.Item<FieldType>
            label="账户"
            name="account"
            rules={[{ required: true, message: '请输入账户' }]}
          >
            <Input placeholder="请输入账户" />
          </Form.Item>

          <Form.Item<FieldType>
            label="密码"
            name="password"
            rules={[{ required: true, message: '请输入密码' }]}
          >
            <Input.Password placeholder="请输入密码" />
          </Form.Item>
          <Form.Item>
            <Button loading={loading} block type="primary" htmlType="submit">
              登录
            </Button>
          </Form.Item>
        </Form>

      </div>
    </div>
  </div>
}

export default LoginPage